<template>
  <div class="loading">
    <div class="head">
      <h1>KL每日数据看板</h1>
    </div>
    <div class="mainbox">
      <ul class="clearfix">
        <!-- 第一列 -->
        <li>
          <div class="boxall" :style="{ height: 'calc(33.3333% - .25rem)' }">
            <div class="tit01">达成率</div>
            <div id="chart" ref="conclude" style="width: 100%; height: 100%;"></div>
            <div class="boxfoot"></div>
          </div>

          <div class="boxall" :style="{ height: 'calc(66.666666% - 3.2rem)' }">
            <div class="tit01">工序不良率</div>
            <div id="Container" ref="chartContainer" style="width: 100%; height: 100%;"></div>
            <div class="boxfoot"></div>
          </div>
        </li>

        <!-- 第二列 -->
        <li>
          <div class="boxall" :style="{ height: 'calc(33.33333% - .25rem)' }">
            <div class="tit02">当前生产</div>
            <div class="boxnav nav02">
              <div>
                <div v-if="productionTaskList">
                  <p class="p1">完成/计划</p>
                  <p class="p2"><span class="counter">{{ productionTaskList.producedQuantity }}</span>/<span
                      class="counter">{{ productionTaskList.plannedQuantity }}</span></p>
                  <p class="p3">
                    <span><i class="dot dot1"></i>未完成:{{ productionTaskList.plannedQuantity -
                      productionTaskList.producedQuantity }}</span>
                    <span><i class="dot dot2"></i>完成率：{{ ((productionTaskList.producedQuantity /
                      productionTaskList.plannedQuantity) * 100).toFixed(2) }}%</span>

                    <span>产品名称: {{ productionTaskList.productName }}</span>
                  </p>
                </div>
                <div v-else>
                  未开启工单
                </div>
              </div>
            </div>
            <div class="boxfoot"></div>
          </div>

          <div class="boxall" :style="{ height: 'calc(66.666666% - 3.2rem)' }">
            <div class="tit03">每小时生产数量</div>
            <div class="boxnav nav03">
              <div class="listhead listhead1">
                <div id="main" ref="main" style="width: 100%; height: 100%;"></div>
              </div>

            </div>
            <div class="boxfoot"></div>
          </div>
        </li>

        <!-- 第三列 -->
        <li>
          <div class="boxall" :style="{ height: 'calc(100% - 3.2rem)', padding: '0' }">
            <div class="tit04">设备状态</div>
            <div class="boxnav nav04">
              <div class="listhead listhead2">
                <span>名称</span>
                <span>工站</span>
                <span>状态</span>

              </div>
              <div style="width: 100%; height: 2rem;"></div>
              <div class="listnav listhead2 scrollDiv" @mouseenter="pauseScroll" @mouseleave="resumeScroll">
                <div class="scroll-wrapper">
                  <div class="scroll-content">
                    <!-- 原始内容 -->
                    <div v-for="(device, index) in deviceList" :key="index" class="staner"
                      @mouseenter="showFullName(device.deviceName, $event)" @mouseleave="hideFullName">
                      <div class="ellipsis">{{ device.deviceName.slice(0, 6) }}</div>
                      <div class="ellipsis">{{ device.workstation }}</div>
                      <div :class="device.deviceStatus == 16 ? 'text-red' : 'text-green'">
                        {{ device.deviceStatus == 1 ? '未运行' : (device.deviceStatus == 2 ? '初始化' : (device.deviceStatus
                          ==
                          4 ? '初始化完成' : (device.deviceStatus == 8 ? '自动运行中' : '报警中'))) }}
                      </div>
                    </div>
                    <!-- 内容副本，实现无缝滚动 -->
                    <div v-for="(device, index) in deviceList" :key="'copy-' + index" class="staner"
                      @mouseenter="showFullName(device.deviceName, $event)" @mouseleave="hideFullName">
                      <div class="ellipsis">{{ device.deviceName.slice(0, 6) }}</div>
                      <div class="ellipsis">{{ device.workstation }}</div>
                      <div :class="device.deviceStatus == 16 ? 'text-red' : 'text-green'">
                        {{ device.deviceStatus == 1 ? '未运行' : (device.deviceStatus == 2 ? '初始化' : (device.deviceStatus
                          ==
                          4 ? '初始化完成' : (device.deviceStatus == 8 ? '自动运行中' : '报警中'))) }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="boxfoot"></div>
          </div>
        </li>
      </ul>
    </div>
    <div v-if="hoveredName" :style="hoverStyle" class="hover-box">
      {{ hoveredName }}
    </div>
  </div>
</template>

<script>
import * as Chart from 'echarts';
import {
  listProductionTask,

} from "@/api/mes/production_task";
import {
  listProcessingRecord,
} from "@/api/mes/processing_record";
import {
  listProductionRecordVo,
} from "@/api/mes/production_record";
import { listDevice } from "@/api/mes/device";
export default {
  data() {
    return {
      productionTaskList: null,
      hoveredName: null,
      // taskId:null,
      deviceList: [],
      hoverStyle: {},
      /**
       * 这个是每小时生产的数据
       */
      drawChartoption: {
        grid: {
          left: '5%',  // 左边距
          right: '0%', // 右边距
          top: '10%',   // 上边距
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['总生产量', '合格数量'],

          textStyle: {
            color: '#ffffff'  // 图例标题文字颜色为白色
          }
        },

        xAxis: [
          {
            type: 'category',
            axisTick: { show: false },
            data: ['00:00-02:00', '02:00-04:00', '04:00-06:00', '06:00-08:00', '08:00-10:00', '10:00-12:00', '12:00-14:00', '14:00-16:00', '16:00-18:00', '18:00-20:00', '20:00-22:00', '22:00-00:00'],
            axisLabel: {
              padding: [7, 6, 0, 6],
              fontSize: 10,
              color: '#ffffff',
              interval: 0,
            }
          }

        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              formatter: '{value}',
              color: '#ffffff'  // y轴文字颜色为白色
            },
            minInterval: 1,
          }
        ],
        series: [
          {
            name: '总生产量',
            type: 'bar',
            barGap: 0,
            label: this.labelOption,
            emphasis: {
              focus: 'series'
            },
            data: [],
            label: {
              show: true,
              position: 'top', // 在柱子顶部显示
              formatter: '{c}', // 显示数据值
            },
          },
          {
            name: '合格数量',
            type: 'bar',
            label: this.labelOption,
            emphasis: {
              focus: 'series'
            },
            data: [],
            label: {
              show: true,
              position: 'top', // 在柱子顶部显示
              formatter: '{c}', // 显示数据值
            },
          },

        ]
      },
      /**
       * 这个是第一个圆图达成率
       */
      option: {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'horizontal',
          left: 'center',
          bottom: 25,
          textStyle: {
            color: '#ffffff',
            fontSize: '12', // 图例文字颜色为白色
          }
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '45%',
            center: ['50%', '40%'],
            data: [
              { value: 0, name: '完成数量' },
              { value: 0, name: '未完成数量' },

            ],
            label: {
              fontSize: 10,  // 调整文字大小，10 是示例，可以根据需要调小
              color: '#FFFFFF',
              overflow: 'break',  // 允许文字换行 // 可以选择合适的颜色
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },

      app: {
        config: {
          rotate: 90,
          align: 'left',
          verticalAlign: 'middle',
          position: 'insideBottom',
          distance: 15,
          onChange: null
        }
      },
      labelOption: {
        show: true,
        position: 'insideBottom',
        distance: 15,
        align: 'left',
        verticalAlign: 'middle',
        rotate: 90,
        formatter: '{c}  {name|{a}}',
        fontSize: 16,
        rich: {
          name: {}
        }
      },
      //工序不良
      chartOptions: {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'horizontal',
          left: 'center',
          bottom: '30',
          textStyle: {
            color: '#ffffff',
            fontSize: '14', // 图例文字颜色为白色
          }
        },
        series: [
          {
            name: '工序不良率',
            type: 'pie',
            radius: '37%',
            center: ['50%', '40%'],
            data: [
              // { value: 1048, name: 'Search Engine' },
              // { value: 735, name: 'Direct' },
              // { value: 580, name: 'Email' },
              // { value: 484, name: 'Union Ads' },
              // { value: 484, name: '111' },
              // { value: 483, name: '2222' },
              // { value: 400, name: '3333' },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
    };

  },
  mounted() {
    this.getdcvies()
    this.getdatapulist()
    this.getWokeystuan()
    this.Chartmain = Chart.init(document.getElementById('main'));
    this.ChartTop = Chart.init(document.getElementById('chart'));
    this.ChartContainer = Chart.init(document.getElementById('Container'));
    window.addEventListener('resize', () => {
      this.Chartmain.resize();
      this.ChartTop.resize();
      this.ChartContainer.resize();
    });
    this.timer = setInterval(() => {
      this.getdcvies();
      this.getdatapulist();
      this.getWokeystuan();
    }, 1 * 60 * 1000); // 3分钟 = 3 * 60 * 1000 毫秒
  },

  created() {

  },
  beforeDestroy() {
    window.removeEventListener('resize', () => {
      this.Chartmain.resize();
      this.ChartTop.resize();
      this.ChartContainer.resize();
    });
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  methods: {
    showFullName(name, event) {
      this.hoveredName = name;
      this.hoverStyle = {
        top: event.clientY - 60 + 'px',
        left: event.clientX - 50 + 'px'
      };
    },
    //工站不良
    getWokeystuan() {
      let queryParams = {
        pageNum: 1,
        pageSize: 10000,
        processingTime:new Date().toISOString().slice(0, 10)
      };
      this.loading = true;
      listProcessingRecord(queryParams).then(response => {
        let wokeystuanList = response.rows;
        const newData = [];
        wokeystuanList.forEach(item => {
          if (item.processingResult == 2) {
            const existing = newData.find(entry => entry.name == item.workstation);
            if (existing) {
              // 如果已存在，value 加 1
              existing.value += 1;
            } else {
              // 如果不存在，新增一项
              newData.push({ value: 1, name: item.workstation });
            }
          }
        });
        
        this.chartOptions.series[0].data = newData
      });
    },
    //每小时生产数量
    getdatapulist() {
      let queryParams = {
        pageNum: 1,
        pageSize: 3000,
        startTime:new Date().toISOString().slice(0, 10),
        productionTaskId:this.taskId
      };
      this.loading = true;
      listProductionRecordVo(queryParams).then(response => {
        let productionRecordList = response.rows;
        const today = new Date().toISOString().slice(0, 10);
        const timeSlots = Array(12).fill(0); // 每个时间段的总数量
        const status2Slots = Array(12).fill(0); // 每个时间段状态为2的数量
        productionRecordList.forEach((item) => {
          const [date, time] = item.productionTime.split(" ");
          if (date == today) {
            const [hours] = time.split(":").map(Number);
            const slot = Math.floor(hours / 2); // 计算当前时间属于哪个时间段
            timeSlots[slot]++; // 增加总数量计数
            if (item.status == 1) {
              status2Slots[slot]++; // 增加状态为2的计数
            }
          }
        });
        this.drawChartoption.series[0].data = timeSlots
        this.drawChartoption.series[1].data = status2Slots
        this.getdataList()
      });
    },
    /**
     * 每小时生产的数据
     */
    getdataList() {
      // this.chart = Chart.init(this.$refs.main);
      this.Chartmain.setOption(this.drawChartoption)
    },
    /**
     * 达成率
     */
    Firstgraph() {
     
      // this.chart = Chart.init(this.$refs.conclude);
      this.ChartTop.setOption(this.option)
    },
    /**
     * 不良工序
     */
    Badprocess() {
      
      // this.chart = Chart.init(this.$refs.chartContainer);
      this.ChartContainer.setOption(this.chartOptions)
    },
    hideFullName() {
      this.hoveredName = null;
    },

    pauseScroll() {
      document.querySelector('.scroll-content').style.animationPlayState = 'paused';
    },
    resumeScroll() {
      document.querySelector('.scroll-content').style.animationPlayState = 'running';
    },

    // 当前机器状态
    getdcvies() {
      let queryParams = {
        pageNum: 1,
        pageSize: 50,
      }
      listDevice(queryParams).then(response => {
        this.deviceList = response.rows;
        this.getToday()
      });
    },

    // 当前计划
    getToday() {
      let queryParams = {
        pageNum: 1,
        pageSize: 1000,
      }
      listProductionTask(queryParams).then(response => {
        let TaskList = response.rows;
        this.productionTaskList = TaskList.find(item => item.isEnabled == 1);
        this.$nextTick(() => {
          this.getdataList()
          this.Badprocess()
          this.Firstgraph()
        });
        if (this.productionTaskList) {
          this.taskId = this.productionTaskList.id
          this.getdatapulist()
          this.option.series[0].data[0].value = this.productionTaskList.producedQuantity
          this.option.series[0].data[1].value = this.productionTaskList.plannedQuantity - this.productionTaskList.producedQuantity
        }
      });
    }
  }
};
</script>

<style scoped>
/* CSS Document */

#main {
  width: 100%;
  height: 100%;
}

li {
  list-style-type: none;
}



i {
  margin: 0px;
  padding: 0px;
  text-indent: 0px;
}

img {
  border: none;
  max-width: 100%;
}

a {
  text-decoration: none;
  color: #399bff;
}

a.active,
a:focus {
  outline: none !important;
  text-decoration: none;
}

ol,
ul,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  padding: 0;
  margin: 0
}

.scrollDiv {
  /* 设置滚动区域的高度 */
  overflow: hidden;
  /* 隐藏超出部分 */
  position: relative;
  font-size: 1rem !important;



}

.ellipsis {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hover-box {
  color: #000;
  font-size: 1rem;
  position: absolute;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 5px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  pointer-events: none;
  /* 确保工具提示不会阻挡鼠标事件 */
  z-index: 1000;
}

.ellipsis {
  flex: 1;

}

.scroll-wrapper {

  height: 100%;
  cursor: pointer;
}

.scroll-content {

  position: absolute;

  animation: scroll 30s linear infinite;
  width: 100%;
  /* 添加滚动动画 */
  animation-play-state: running;

}

@keyframes scroll {
  0% {
    top: 0;
  }

  100% {
    top: -100%;
    /* 根据内容高度调整 */
  }
}

/* 定义颜色样式 */
.text-green {
  flex: 1;
  color: green;

}

.text-red {
  flex: 1;
  color: red;
}

a:hover {
  color: #06c;
  text-decoration: none !important
}

i,
em {
  font-style: normal;
}

.clearfix:after,
.clearfix:before {
  display: table;
  content: " "
}

.clearfix:after {
  clear: both
}

.pulll_left {
  float: left;
}

.pulll_right {
  float: right;
}

/*谷哥滚动条样式*/

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  position: absolute
}

::-webkit-scrollbar-thumb {
  background-color: #5bc0de
}

::-webkit-scrollbar-track {
  background-color: #ddd
}

/***/

.loading {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 1.3rem;
  z-index: 100000000;
  width: 100%;
  height: 100%;
  /* background: #1a1a1c; */
  text-align: center;
  background: linear-gradient(25deg, #0f2249, #182e5a 20%, #0f2249 40%, #182e5a 60%, #0f2249 80%, #182e5a 100%) !important;
  color: #fff;
}

.loadbox {
  position: absolute;
  width: 160px;
  height: 150px;
  color: #324e93;
  left: 50%;
  top: 50%;
  margin-top: -100px;
  margin-left: -75px;
}

.loadbox img {
  margin: 10px auto;
  display: block;
  width: 40px;
}


.head {
  height: 4rem;
  background: url(../assets/images/head_bg.png) no-repeat center center;
  background-size: 100% 100%;
  position: relative
}

.head h1 {
  color: #bde4ff;
  text-align: center;
  font-size: 1.6rem;
  line-height: 3.5rem;
  letter-spacing: .5rem;
}

.head h1 img {
  width: 1.5rem;
  display: inline-block;
  vertical-align: middle;
  margin-right: .2rem
}


.mainbox {
  padding: 1rem 0rem 0rem 0rem;
  height: calc(100% - 1.05rem);
}

.mainbox>ul {
  margin-left: .1rem;
  margin-right: .1rem;
  height: 100%;
  display: flex;
  justify-content: space-between;
}

.mainbox>ul>li {
  float: left;
  padding: 0 .13rem;
  height: 100%;

}

.mainbox>ul>li {
  width: 20%
}

.mainbox>ul>li:nth-child(2) {
  width: 58%
}

.mainbox>ul>li:nth-child(3) {
  width: 20%
}

.boxall {
  border: 1.5px solid #3486da;
  background: rgba(0, 70, 190, .1);
  padding: .15rem;
  position: relative;
  margin-bottom: .25rem;
  z-index: 10;
  overflow: hidden;
}

.boxall:before,
.boxall:after {
  position: absolute;
  width: .65rem;
  height: .65rem;
  content: "";
  border-top: 3px solid #3486da;
  top: -2px;
}

.boxall:before,
.boxfoot:before {
  border-left: 3px solid #3486da;
  left: -2px;
}

.boxall:after,
.boxfoot:after {
  border-right: 3px solid #3486da;
  right: -2px;

}

.boxfoot {
  position: absolute;
  bottom: 0;
  width: 100%;
  left: 0;
}

.boxfoot:before,
.boxfoot:after {
  position: absolute;
  width: .65rem;
  height: .65rem;
  content: "";
  border-bottom: 3px solid #3486da;
  bottom: -2px;
}

.tit01 {
  background: linear-gradient(to right, rgba(48, 82, 174, 1), rgba(48, 82, 174, 0)) !important;
  color: #fff;
  font-size: 1rem;
  padding: .08rem .1rem;
}

.staner {
  color: #fff;
  font-size: 0.7rem;
  display: flex;
  justify-content: space-around;
  font-weight: bold;
  height: 2.9rem;
}

.tit02 {
  background: #3aafe8;
  color: #fff;
  position: absolute;
  font-size: 1rem;
  font-weight: 600;
  padding: .2rem 0;
  text-align: center;
  width: 8rem;
  left: 45%;
  margin-left: -1.2rem;
  margin-top: -.35rem;
  letter-spacing: .05rem;
}

.tit03 {
  text-align: center;
  color: #fff;
  font-size: 1.2rem;
  line-height: 2.5rem;
  letter-spacing: .2rem;
}

.tit04 {
  text-align: center;

  color: #fff;
  font-size: 1rem;
  line-height: 3rem;
  letter-spacing: .2rem;
}

.wrap {
  height: 2.54rem;
  overflow: hidden;
}

.wrap li {
  line-height: .42rem;
  height: .42rem;
  font-size: .18rem;
  text-indent: .24rem;
  margin-bottom: .1rem;
}

.wrap li p {
  border: 1px solid rgba(25, 186, 139, .17);
  color: rgba(255, 255, 255, .6);
}



.nav01 {
  height: calc(100% - .3rem);
  padding-top: .2rem;
}

.nav02 {
  height: calc(100%);
  display: flex;
  align-items: center;
}

.nav03 {
  height: calc(100% - .47rem);
  padding-top: .2rem;
}

.nav04 {
  height: calc(100% - .7rem);
}

.nav02>div {
  width: 100%;
}

.nav02 p {
  text-align: center;
  color: #fff;
}

.nav02 .p1 {
  font-size: 1rem;
  letter-spacing: .12rem;
  font-weight: bold;
}

.p2 {
  font-size: 2rem;
  letter-spacing: .2rem;
  padding: .1rem 0;
  width: 100%;
  text-align: center;
}

.nav02 .p3 span {
  text-align: center;
  color: #fff;
  display: inline-block;
  width: 45%;
  font-size: 1.1rem;
}

.dot {
  width: .7rem;
  height: .7rem;
  display: inline-block;
  border-radius: 1rem;
  position: relative;
  top: .04rem;
  margin-right: .1rem;
}

.dot1 {
  background: #ff0006
}

.dot2 {
  background: #00ea37
}

.text-green {
  color: #00ea37;
  margin-left: 0.1rem;
}

.text-red {
  color: #ff0006;
}

.listhead {
  height: 1rem;
  display: flex;
  justify-content: space-between;
}

.listnav {
  height: calc(100% - .6rem);
}

.listnav ul li {
  height: 100%;
  display: flex;
  justify-content: space-between;
}

.listhead span,
.listnav li span {
  width: 100%;
  align-items: center;
  justify-content: center;
  display: flex;
  height: 1rem;
}

.listhead1 {
  width: 100%;
  height: 100%;
}

.listnav ul li span {
  font-size: .18rem;
}



.listhead1 span {

  font-size: 1rem;
  color: #3486da;
  font-weight: bold;
}

.listhead2 span {
  font-size: 1rem;
  color: #bde4ff;


  font-weight: 600;
}




/*Plugin CSS*/
.str_wrap {
  overflow: hidden;
  width: 100%;
  position: relative;
  -moz-user-select: none;
  -khtml-user-select: none;
  user-select: none;
  white-space: nowrap;
}


.str_move {
  white-space: nowrap;
  position: absolute;
  top: 0;
  left: 0;
  cursor: move;
}

.str_move_clone {
  display: inline-block;
  vertical-align: top;
  position: absolute;
  left: 100%;
  top: 0;
}

.str_vertical .str_move_clone {
  left: 0;
  top: 100%;
}

.str_down .str_move_clone {
  left: 0;
  bottom: 100%;
}

.str_vertical .str_move,
.str_down .str_move {
  white-space: normal;
  width: 100%;
}

.str_static .str_move,
.no_drag .str_move,
.noStop .str_move {
  cursor: inherit;
}

.str_wrap img {
  max-width: none !important;
}

.payment-time {
  padding-right: 10px;
}
</style>
